<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script>
    (function (){

    window.addEventListener("load", function(){

    var data = [40, 24, 20, 14, 14, 11, 10, 8, 6, 5, 5];
    var xinforma = ['人民文学出版社','上海译文出版社','生活.读书.新知三联书店','译林出版社','南海出版公司','北京十月文艺出版社','广西师范大学出版社','上海人民出版社','哈尔滨出版社','中华书局','作家出版社'];

    // 获取上下文
    var a_canvas = document.getElementById('a_canvas');
    var context = a_canvas.getContext("2d");


    // 绘制背景
    var gradient = context.createLinearGradient(0,0,0,300);


    gradient.addColorStop(0,"#e0e0e0");
    gradient.addColorStop(1,"#ffffff");


    context.fillStyle = gradient;

    context.fillRect(0,0,a_canvas.width,a_canvas.height);

    var realheight = a_canvas.height-15;
    var realwidth = a_canvas.width-40;
    // 描绘边框
    var grid_cols = data.length + 1;
    var grid_rows = 4;
    var cell_height = realheight / grid_rows;
    var cell_width = realwidth / grid_cols;
    context.lineWidth = 1;
    context.strokeStyle = "#a0a0a0";

    // 结束边框描绘
    context.beginPath();
    // 准备画横线
    /*for(var row = 1; row <= grid_rows; row++){
    var y = row * cell_height;
    context.moveTo(0,y);
    context.lineTo(a_canvas.width, y);
    }*/

    //划横线
    context.moveTo(10,realheight);
    context.lineTo(realwidth,realheight);


    //画竖线
    context.moveTo(10,10);
    context.lineTo(10,realheight);
    context.lineWidth = 1;
    context.strokeStyle = "black";
    context.stroke();


    var max_v =0;

    for(var i = 0; i<data.length; i++){
    if (data[i] > max_v) { max_v =data[i]};
    }
    max_v = max_v * 1.1;
    // 将数据换算为坐标
    var points = [];
    for( var i=0; i < data.length; i++){
    var v= data[i];
    var px = cell_width *　(i +1);
    var py = realheight - realheight*(v / max_v);
    //alert(py);
    points.push({"x":px,"y":py});
    }

    //绘制坐标图形
    for(var i in points){
    var p = points[i];
    context.beginPath();
    context.fillStyle="green";
    context.fillRect(p.x,p.y,15,realheight-p.y);

    context.fill();
    }
    //添加文字
    for(var i in points)
    {  var p = points[i];
    context.beginPath();
    context.fillStyle="black";
    context.font = 'bold 11px 微软雅黑';
    context.fillText(data[i], p.x + 1, p.y - 15);
    context.fillText(xinforma[i],p.x + 2,realheight+12);
    context.fillText('出版社',realwidth,realheight+12);
    }
    },false);
    })();

</script>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container-fluid">
            <div>
                <form class="navbar-form navbar-right"  method="POST" action="{% url 'app:book_search' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search Book" name="bookname">
                    </div>
                    <button type="submit" class="btn btn-default">Search</button>
                </form>
            </div>
            <div class="navbar-header">
                <a class="navbar-brand" href={% url 'app:index' %}>APP主页</a> 
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li><a href={% url 'app:pie_graph' %}>饼状图</a></li>
                    <li class="dropdown active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            柱状图
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href={% url 'app:bar_chart' %}>柱状图一</a></li>
                            <li><a href={% url 'app:bar_chart_2' %}>柱状图二</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            出版社排行
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href={% url 'app:publish_house_info_1' %}>所获评分最高</a></li>
                            <li><a href={% url 'app:publish_house_info_2' %}>评价人次最多</a></li>
                            <li><a href={% url 'app:publish_house_info_3' %}>出版优秀图书最多</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <br/><br/>
    <div>
        <h3>上榜图书数量</h3>
        <canvas id="a_canvas" width="1500" height="700">
        浏览器不支持canvas
        </canvas><br/><br/><br/><br/><br/><br/>
    </div>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
</body>
</html>